<template>
  <div>
    
    <el-form class="form">
      <div class="head">
        <el-input
          class="elinput"
          placeholder="根据关键字查询题型"
          v-model="input"
          clearable
        >
        </el-input>
        <el-button
          class="elbut"
          type="primary"
          icon="el-icon-search"
          @click="but"
          >搜索</el-button
        >
        <el-button
          type="primary"
          class="crebut"
          icon="el-icon-plus"
          @click="
            dialogFormVisible = true;
            typescripts ? true : resetForm('ruleForm');
          "
          >添加</el-button
        >
        <div class="clear"></div>
      </div>

      <el-table
        id="cent"
        :data="tableData"
        border
        style="width: 59.6%"
      >
        <el-table-column fixed type="index" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="tname" label="课题名称" width="320">
        </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-popconfirm
              title="确定删除吗？"
              @confirm="del(scope.row)"
            >
              <el-button type="text" size="small" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
            <el-button type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
import home from '../api/home'
export default {
  data() {
    return {
      input: "",
      tableData: [],
    };
  },
  created(){
    this.getQid()
  },
  methods: {
    but() {
      if (this.input == "") {
        this.$message({
          message: "搜索框不能为空",
          type: "warning",
        });
        return;
      }
      this.axios.get(`/question/qdetails/get/${this.input}`).then((res) => {
        this.$emit("tableDatas", res.data);
      });
    },
    getQid(qid) {
      this.axios.get(`/question/qdetails/findAll/${qid}`).then((res) => {
        this.tableData = res.data;
        console.log(this.tableData)
      });
    },
    del(row){
        home.del(row.pid).then(()=>{
            this.getQid(row.pid)
            this.$message({
                message:'恭喜你，删除成功',
                type:'success'
            })
        })
    },
    tableDatas(data) {
      this.tableData = data;
    },
  },
};
</script>
<style>
.form {
  width: 70%;
  height: 600px;
  /* background-color: red; */
  margin: auto;
}
.head {
  width: 45%;
  float: right;
  /* background-color: royalblue; */
}
#cent {
  margin: auto;
}
.elbut {
  float: left;
  margin-top: 20px;
}
.elinput {
  float: left;
  width: 50%;
  margin-right: 20px;
  margin-top: 20px;
}
.crebut {
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.clear {
  clear: both;
}
</style>